<template>
	<div>
		<el-dialog v-model="showDialog" :title="props.payType == 1 ? '余额充值' : '授信还款'" width="600px" draggable>
			<div>
				<div style="margin-bottom: 20px; font-size: 12px">
					<div>开户账号【Beneficiary Account】：338-890043-76204</div>
					<div>收款人全称【Beneficiary Name】：윤형풍국제무역주식회사 RUNHENGFENG INTERNATIONAL TRADE CO.,LTD</div>
					<div>开户银行【Beneficiary Bank Name】：韩国韩亚银行 korea Hana Bank</div>
				</div>

				<el-form ref="Form" :model="form" label-width="100px" :rules="rules">
					<el-form-item v-if="props.payType == 2" label="已用额度">
						<el-input disabled v-model="usedAmount" />
					</el-form-item>
					<el-form-item v-if="props.payType == 2" label="还款方式">
						<el-select @change="changeType()" style="width: 100%" v-model="form.type" placeholder="还款方式">
							<el-option label="线下充值" :value="1" />
							<el-option label="余额还款" :value="2" />
						</el-select>
					</el-form-item>
					<el-form-item label="金额" prop="amount">
						<el-input v-model="form.amount" />
					</el-form-item>
					<div v-if="form.type == 1">
						<el-form-item label="付款人" prop="pay_name">
							<el-input v-model="form.pay_name" />
						</el-form-item>
						<el-form-item label="付款银行账号">
							<el-input v-model="form.bank_account" />
						</el-form-item>
						<el-form-item label="交易号">
							<el-input v-model="form.trans_no" />
						</el-form-item>
						<el-form-item v-if="props.payType == 1" label="付款方式">
							<el-select @change="changePayType()" style="width: 100%" v-model="form.pay_type" placeholder="还款方式">
								<el-option label="转账" :value="1" />
								<el-option label="现金" :value="2" />
							</el-select>
						</el-form-item>

						<el-form-item label="转账凭证" prop="pay_img">
							<UploadImg v-model:imageUrl="form.pay_img" width="250px">
								<template #empty>
									<el-icon><Picture /></el-icon>
									<span>请上传转账凭证</span>
								</template>
							</UploadImg>
						</el-form-item>
					</div>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showDialog = false">取消</el-button>
					<el-button @click="submit()" type="primary">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, reactive, watch, onMounted } from "vue";
import UploadImg from "@/components/Upload/Img.vue";
import { createRecharge } from "@/api/modules/wallet";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { GlobalStore } from "@/stores";
import { getUserInfo } from "@/api/base";

const globalStore = GlobalStore();
const Form = ref<FormInstance>();
const usedAmount = computed(() => {
	return Number(globalStore.userInfo.credit_use).toFixed(2);
});
const emit = defineEmits(["update:showDialog"]);
const form = ref({
	account_type: 1,
	amount: "",
	type: 1,
	pay_type: 1,
	pay_name: "",
	bank_account: "",
	trans_no: "",
	pay_img: ""
});
const rules = reactive({
	amount: [{ required: true, message: "请输入充值金额" }],
	pay_name: [{ required: true, message: "请输入付款人" }],
	pay_img: [{ required: true, message: "请上传转账凭证" }]
});
const props = defineProps({
	showDialog: {
		required: true,
		type: Boolean
	},
	payType: {
		required: true,
		type: Number
	}
});
const showDialog = computed({
	get() {
		return props.showDialog;
	},

	set(value) {
		emit("update:showDialog", value);
	}
});
const changeType = () => {
	if (form.value.type == 2) {
		rules.pay_name[0].required = false;
		rules.pay_img[0].required = false;
	} else {
		rules.pay_name[0].required = true;
		rules.pay_img[0].required = true;
	}
};
const changePayType = () => {
	if (form.value.pay_type == 1) {
		rules.pay_img[0].required = true;
	} else {
		rules.pay_img[0].required = false;
	}
};
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
};
watch(showDialog, () => {
	if (showDialog.value) {
		resetForm(Form.value);
		form.value = {
			pay_type: 1,
			account_type: 1,
			amount: "",
			type: 1,
			pay_name: "",
			bank_account: "",
			trans_no: "",
			pay_img: ""
		};
	}
});
onMounted(() => {});
const submit = () => {
	Form.value!.validate(async valid => {
		if (!valid) return;
		form.value.account_type = props.payType;
		createRecharge(form.value).then(() => {
			ElMessage.success("充值申请提交成功");
			getUserInfo({}).then((res: any) => {
				globalStore.setUserInfo(res.data.user);
			});

			emit("update:showDialog", false);
		});
	});
};
</script>

<style lang="scss" scoped></style>
